<template>
    <div class="maintaindatadatabase" v-loading="state.loading">
        <el-card>
            <template #header>
				<div class="card-header clearfix">
                        <span class="headerTitle">{{state.title}}</span>
				</div>
            </template>
            <div>
				<Table
					ref="tableRef"
					v-bind="state.tableData"
					class="table-demo"
					@pageChange="onTablePageChange"
					@sortHeader="onSortHeader"
					@columnCzBtn="onColumnCzBtn"
					@columnClick="onColumnClick"
				/>
			</div>
        </el-card>
        <el-dialog
            v-model="state.dtShow"
            :title="'['+state.dtItem.TABLE_NAME+']'+state.dtItem.TABLE_COMMENT" >
                <el-table :data="state.detailList" style="width: 100%">
                    <el-table-column prop="COLUMN_NAME" label="字段名" align="center" />
                    <el-table-column prop="COLUMN_TYPE" label="数据类型" align="center" />
                    <el-table-column prop="COLUMN_DEFAULT" label="默认值" align="center" />
                    <el-table-column prop="IS_NULLABLE" label="允许非空" align="center" />
                    <el-table-column prop="EXTRA" label="自动递增" align="center" />
                    <el-table-column prop="COLUMN_COMMENT" label="备注" align="center" />
                </el-table>
        </el-dialog>
    </div>
</template>
    
<script lang="ts" setup name="maintaindatadatabase">
    import { toRefs,ref, reactive,onMounted, defineComponent,defineAsyncComponent } from 'vue';
    import { useRouter } from 'vue-router'
    import { ElNotification, ElMessage ,ElMessageBox ,FormRules,ElTree} from 'element-plus'
    import { systemApi,pageInfo } from '/@/api';
    
    // 引入组件
    const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
    const router = useRouter();
    // 定义变量内容
    const tableRef = ref<RefType>();
    const state = reactive({
        roleBtn:router.currentRoute.value.meta.roleBtn,
        title:router.currentRoute.value.meta.title,
        btnloading:false,
        loading:true,
        dataList:[],
        pages: {
            isAll: false,
            pageCount: 0,
            pageSize: 0,
            recordCount: 0,
            pno: 1
          },
        tableData:{
            data: [],// 列表数据（必传）
            // 表头内容（必传，注意格式）
            header: [],
            // 配置项（必传）
            config: {
                total: 0, // 列表总数
                loading: true, // loading 加载
                isBorder: false, // 是否显示表格边框
                isSerialNo: false, // 是否显示表格序号
                isSelection: true, // 是否显示表格多选
                isExcel: true, // 是否可以导出
                excelName:"数据库列表"
            },
            btn:["details","yhbtn"],
            topBtn:[
                {content:"优化选中的数据表",icon:"fa-recycle",type:"success",title:"优化",key:"youhua"},
                {content:"修复选中的数据表",icon:"fa-retweet",type:"warning",title:"修复",key:"xiufu"},
            ]
        },
        detailList:[],
        dtShow:false,
        dtItem:{
            TABLE_NAME:"",
            TABLE_COMMENT:""
        }
    });
    // 表单点击回调
    const onColumnClick = (row: EmptyObjectType) => {
        // console.log(row)
    }
    // 表单操作回调
    const onColumnCzBtn = (row: EmptyObjectType) => {
        // ElMessage.success(`删除${row.name}成功！`);
        if(row.key=='beifen'||row.key=="youhua"||row.key=="xiufu"){
            systemApi('operationDb',row).then(res=>{
                ElMessage({message:res.msg?res.msg:'操作成功',type:res.type?res.type:"success"});
            })
        }
        if(row.key=='details'){
            systemApi('getRead?tablename='+row.data.TABLE_NAME,{}).then(res=>{
                state.dtItem=row.data;
                state.detailList=res.list;
                state.dtShow=true;
            })
        }
    }
    // 分页改变时回调
    const onTablePageChange = (page: TableDemoPageType) => {
        // state.tableData.param.pageNum = page.pageNum;
        // state.tableData.param.pageSize = page.pageSize;
        // getTableData();
        state.pages.pageSize=page.pageSize;
        getDatabaseList(page.pno);
    };
    // 拖动显示列排序回调
    const onSortHeader = (data: TableHeaderType[]) => {
        state.tableData.header = data;
    };
    // 获取页面前置
    const getpageInfo=()=>{
        pageInfo('database',{}).then(res=>{
            state.pageInfo=res;
            state.tableData.header=res.tbhdList;
            getDatabaseList();
        })
    }
    // 获取数据表列表
    const getDatabaseList=(pno:string|number)=>{
        state.tableData.config.loading =true;
        if(!pno){
            pno=1;
        }
        const dt={
            pages:{
                pno:pno,
                pageSize:state.pages.pageSize
            },
        };
        systemApi('dataBaseList',dt).then(res=>{
            state.tableData.data=res.list;
            state.tableData.config.total=res.pages.recordCount;
            state.loading = false;
            state.tableData.config.loading = false;
        })
    }
    // 权限判断
    const isAuthBtn = (e) => {
        let auth=false;
        if(e){
            for(let p of state.roleBtn){
                if(p==e){
                    auth=true;
                }
            }
        }
        return auth;
    };
    // 跳转
    const tourl = (e) => {
        router.push(e);
    };
    
    onMounted(()=>{
          // 获取当前路由实例参数
        //   console.dir(router.currentRoute.value.query.id);
        //   console.dir(router.currentRoute.value.meta.roleBtn);
          if(!isAuthBtn('index')){
              router.push('/401');
          }else{
              //操作函数
              getpageInfo();
          }
    })
</script>
    
<style scoped lang="scss">
    .maintaindatadatabase{
        padding:5px;
    }
</style>
    